<template>
  <el-dialog
    v-model="visible"
    title="选择版本和年级"
    width="600px"
    :close-on-click-modal="false"
  >
    <div class="version-section">
      <div class="section-title">选择版本</div>
      <el-radio-group v-model="selectedVersion">
        <el-radio 
          v-for="item in versions" 
          :key="item.value"
          :label="item.value"
          class="version-item"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>
    
    <div class="grade-section">
      <div class="section-title">选择年级</div>
      <el-radio-group v-model="selectedGrade">
        <el-radio 
          v-for="item in grades" 
          :key="item.value"
          :label="item.value"
          class="grade-item"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  defaultValue: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const visible = ref(false);
const selectedVersion = ref('');
const selectedGrade = ref('');

const versions = [
  { label: '浙教旧版', value: 'zj_old' },
  { label: '浙教新版', value: 'zj_new' },
  { label: '人教版', value: 'rj' },
  { label: '北师大版', value: 'bsd' }
];

const grades = [
  { label: '一年级上', value: '1_1' },
  { label: '一年级下', value: '1_2' },
  { label: '二年级上', value: '2_1' },
  { label: '二年级下', value: '2_2' },
  { label: '三年级上', value: '3_1' },
  { label: '三年级下', value: '3_2' },
  { label: '四年级上', value: '4_1' },
  { label: '四年级下', value: '4_2' },
  { label: '五年级上', value: '5_1' },
  { label: '五年级下', value: '5_2' },
  { label: '六年级上', value: '6_1' },
  { label: '六年级下', value: '6_2' }
];

watch(() => props.modelValue, (val) => {
  visible.value = val;
  if (val && props.defaultValue) {
    // 当弹窗打开时，设置选中值
    selectedVersion.value = props.defaultValue.version?.value || versions[0].value;
    selectedGrade.value = props.defaultValue.grade?.value || grades[0].value;
  }
});

watch(() => visible.value, (val) => {
  emit('update:modelValue', val);
  if (!val) {
    // 只在关闭时清空选择
    if (!props.defaultValue) {
      selectedVersion.value = '';
      selectedGrade.value = '';
    }
  }
});

const handleConfirm = () => {
  const version = versions.find(v => v.value === selectedVersion.value) || versions[0];
  const grade = grades.find(g => g.value === selectedGrade.value) || grades[0];
  emit('confirm', { version, grade });
  visible.value = false;
};

const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 16px;
  color: var(--el-text-color-primary);
}

.version-section {
  margin-bottom: 24px;
}

.version-section,
.grade-section {
  display: flex;
  flex-direction: column;
}

:deep(.el-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:deep(.el-radio__label) {
  padding: 6px 16px;
  font-size: 14px;
  text-align: center;
  color: var(--el-text-color-regular);
}

:deep(.el-radio__inner) {
  display: none;
}

:deep(.el-radio.is-checked .el-radio__label) {
  color: var(--el-color-primary);
  font-weight: bold;
}

:deep(.el-radio:not(.is-checked):hover .el-radio__label) {
  color: var(--el-color-primary);
}
</style>